Diamond HTML Photo Template

• By: GT3 themes
• gt3themes.com

Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to my support forum. Also you can find a lot of useful information right there. Thanks so much!

How to change the logo?

You can do that very easily, simply replace the current logo image with your own one.

The curren logo image is located in img/logo.png folder. The required size is 190 × 90(px). Note, You have to upload the retina logo in img/retina/logo.png folderin 2 sizes bigger to look great on tablets and mobile devices.

For example, your site logo is 190 × 90px the retina version will be 380x180px.

How to change Menu items?

Let's take a look how to change current menu items. Please open required page file to change the code under the line with <div class="menu-main-menu-container">:

           <ul id="menu-main-menu" class="menu">
                   <li class="current-menu-parent menu-item-has-children">
                                 <a href="#"><span>Home</span></a>
                                 <ul class="sub-menu">
                                        <li class="current-menu-item"><a href="index.html"><span>Fullscreen Slider</span></a></li>
                                        <li><a href="bg_image.html"><span>Background Image</span></a></li>
                                        <li><a href="bg_video.html"><span>Background Video</span></a></li>
                              </ul>
                           </li>

How to change Fullscreen Slider items?

Please open index.html file to change the code under the line #151:

gallery_set = [
       {type: "image", image: "img/gallery/slider/1.jpg", thmb: "img/gallery/slider/thumbs/1.jpg", alt: "Sarah Brown", title: "Sarah Brown", description: "Curabitur condimentum pharetra metus, sit amet facilisis ante laoreet rutrum.", titleColor: "#ffffff", descriptionColor: "#ffffff"},
       {type: "image", image: "img/gallery/slider/2.jpg", thmb: "img/gallery/slider/thumbs/2.jpg", alt: "", title: "", description: "", titleColor: "#000000", descriptionColor: "#000000"},
       {type: "vimeo", uniqid: "4675", src: "80033084", thmb: "img/gallery/slider/thumbs/3.jpg", alt: "", title: "", description: "", titleColor: "#000000", descriptionColor: "#000000"},
       {type: "image", image: "img/gallery/slider/4.jpg", thmb: "img/gallery/slider/thumbs/4.jpg", alt: "Jessica Black", title: "Jessica Black", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit aliquam mi mauris.", titleColor: "#ffffff", descriptionColor: "#ffffff"},

• type: "image", image: "img/gallery/slider/1.jpg" is the path to the image.
• thmb: "img/gallery/slider/thumbs/1.jpg" is the path to an image thumb that displays at the bottom of the page.
• alt: "Sarah Brown", title: "Sarah Brown" are the alts for search engine indexing process and an image title.
• description: "Curabitur condimentum pharetra metus, sit amet facilisis ante laoreet rutrum." is a description displayed under the title.
• titleColor: "#000000", descriptionColor: "#000000"} - you can manually change text colors.

How to add/manage Works?

The template contains the Works section.

There are different Portfolio listing layouts presented in the Diamond template: Grid Style, Grid with Margin, Grid with Title, Masonry, Masonry with Margin, Masonry with Title and Columns.
You can find the required one in template files (portfolio-grid1.html, portfolio-grid2.html, portfolio-grid3.html, portfolio-masonry.html, portfolio-masonry2.html, portfolio-masonry3.html, portfolio_1column.html, portfolio_2column.html, portfolio_3column and portfolio_4column.html ).
Below you can check an example, how to manage portfolio items in Masonry layout. Please open portfolio-masonry.html, under the line 173 find the following code:

   <div class="fullscreen_block hided">
       <div class="fs_blog_module fw_port_module sorting_block">
             <div class="blogpost_preview_fw fw-portPreview element nature">
                     <div class="fw-portPreview-wrapper mas_style1 pr40 pb40">
                         <a href="portfolio_simple_fullwidth_image_post.html">
                                 <img src="img/portfolio/masonry/1.jpg" alt="" class="fw_featured_image"
                                 width="540">
                                 <div class="fw-portPreview-fadder"></div>
                                 <div class="fw-portPreview-content">
                                       <h2 class="fw-portPreview-title">Lorem ipsum dolor sit amet</h2>
                                       <div class="block_likes">
                                       <div class="fw-portPreview-views">
                                             <i class="stand_icon icon-eye"></i> <span>2386</span>
                                       </div>
                                       <div class="fw-portPreview-likes">
                                             <i class="stand_icon icon-heart-o"></i>
                                           <span>82</span>
                                       </div>
                                       </div>
                                 </div>
                         </a>
                     </div>
             </div>

• src=img/portfolio/masonry/1.jpg is a path to the image.
• <a href="portfolio_simple_fullwidth_image_post.html" is a path to the portfolio item.
• Lorem ipsum dolor sit amet is a title.
• fw-portPreview-views is a number of views the portfolio item.
• fw-portPreview-likes is a number of likes.

How to add/manage Gallery?

As you can see this template comes with different gallery types: Albums, Grid, Masonry, Kenburns, Ribbon, With Margin, Portrait Format and Portarit&Landscape.

Let's try to manage one of the gallery examples. Please open gallery_masonry.html file and find the following lines:

  <div class="fullscreen_block hided">
      <div class="fs_blog_module fw_port_module2 is_masonry mt0 ml0">
          <div class="blogpost_preview_fw fw-portPreview">
             <div class="fw-portPreview-wrapper featured_items pr0 pb0">
                <div class="fw-portPreview-wrapper featured_items pr0 pb0">
                <div class="img_block wrapped_img">
                    <a class="featured_ico_link prettyPhoto" href="img/gallery/masonry/1.jpg"
                    data-rel="prettyPhoto[gallery111]" title="">
                        <img width="540" src="img/gallery/masonry/thumbs/1.jpg" alt= ""/>
                        <div class="featured_item_fadder"></div>
                    </a>
                    <div class="gallery_likes gallery_likes_add already_liked">
                        <i class="stand_icon icon-heart"></i>
                        <span>22</span>
                    </div>
                </div>
             </div>
          

Every gallery item starts and ends with the <div></div> tags.

• <a href="img/gallery/masonry/1.jpg"": is a path to an image;
• <img width="540" src="img/gallery/masonry/thumbs/1.jpg" alt="" />: is a thumb path, its width should be 540px;
• title="" - add a text for a title;
• Note, change only details indicated above.

How to use Shortcodes?

In case you need to use one of the existing shortcodes on a page you should simply open shortcodes.html page and copy one of the presented shortcodes.

For example, you want to copy Partners in shortcodes.html. In this case please copy the code from the lines 841-891, past it on the page where you need.

         <div class="row">
                <div class="span12 module_number_25 module_cont pb30 module_partners" >
                <div class="bg_title"><h4 class="headInModule">Partners</h4></div>
                <div class="module_content sponsors_works items5" >
                        <ul>
                            <li>
                                <div class="item_wrapper">
                                <div class="item">
                                       <a href="http://www.gt3themes.com/" target="_blank"><img src="img/imgs/
                                       shortcodes/gt3themes1.png""alt="GT3Themes" title="GT3Themes" /></a>
                                   </div>
                                </div>
                            </li>

How to change the color of the theme?

You can find two files in css folder where the color styles are located: theme.css and custom.css

Contact Form Setup

In case you need to use the contacts page with the form where customer can send mail, simply open one of the files contacts-fullscreen.html or contacts.html to find the code:

        <form id="ajax-contact-form" action="#" >
                   <input type="text "name="name" value="" placeholder="Name *" />
                   <input type="text "name="email" value="" placeholder="Email *" />
                    <input type="text "name="subject" value="" placeholder="Subject" />
                    <textarea name="message"placeholder="Message *"> </textarea>
                    <input type="submit" value="Send message!">
       </form >

Please open mail.php file and find yourname@yourdomain.com on line 3, simply replace to your email address. All the requests will be sent to the adress you indicated. That's all ;)

Note, We use PHP mail() Function for the mail. To use the PHP mail() function, PHP requires an installed and working email system. The program to be used is defined by the configuration settings in the php.ini file. You need to be sure that your server supports the feature.

Source files included

Diamond comes with 42 HTML files. Some PSD files can include different pages inside, and can have hidden layers. Please note that the images are not included in the package.

All .js files are located in the /js/ folder.